<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        
        <!-- MiMerge CSS -->
        <link rel="stylesheet" href="css/micluster.rest.css">
        <link rel="stylesheet" href="css/chosen.css">
        <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.3.custom.min.css">
        
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div style='width:70%;background:#ffffff;margin-left:auto;margin-right:auto;border-color: #CCCCCC;border-image: none;border-style: solid;border-width: 0 1px 1px;'>
            <div id="logo" class="logo">
                <img style="display:block;margin-left:auto;margin-right:auto;" src="img/logo.png">
            </div>
            <div class="menu">
                <ul>
                    <li id='service_item'>Cluster By Service(s)</li>
                    <li id='url_item'>Cluster By URL</li>
                    <li id='file_item'>Cluster By File</li>
                    <li id='status_item'>Status</li>
                    <li><a href="https://code.google.com/p/micluster/" target="_blank">micluster</a></li>
                    <li><a href="https://code.google.com/p/micluster/wiki/mimerge" target="_blank">documentation</a></li>
                    <li id='about_item'>About</li>
                </ul>
            </div>
            <div style="margin-bottom:40px;">
            <section>
                    <fieldset id='service'>
                        <legend>Cluster By Service(s)</legend>
                        <br/>
                        <label>Query:</label>
                        <input type="text" id='service_query' value='identifier:P37173'/>
                        <br/>
                        <br/>
                        <label>Service:</label>
                        <select id='service_service' data-placeholder="sevice to query" multiple class="chosen-select-width" tabindex="16"></select>
                        <br/>
                        <br/>
                        <label >Mapping:</label>
                        <select id='service_mapping' data-placeholder="database mapping" multiple class="chosen-select-width" tabindex="16">
                            <option selected>uniprotkb</option>
                            <option selected>intact</option>
                            <option selected>ddbj/embl/genbank</option>
                            <option selected>chebi</option>
                            <option selected>irefindex</option>
                            <option selected>hgnc</option>
                            <option selected>ensembl</option>
                        </select>
                        <br/>
                        <br/>
                        <label>Score:</label>
                        <input type="checkbox" id='service_score' name="score"/>
                        <br/>
                        <a id='service_butt' class="link-style" href="#">Send</a>
                    </fieldset>
                    
                    <fieldset id='url'>
                        <legend>Cluster By URL</legend>
                        <br/>
                        <label>Service url:</label>
                        <input type="text" id='url_service' value='http://www.ebi.ac.uk/Tools/webservices/psicquic/intact/webservices/current/search/query/identifier:P37173'/>
                        <br/>
                        <br/>
                        <label >Mapping:</label>
                        <select id='url_mapping' data-placeholder="database mapping" multiple class="chosen-select-width" tabindex="16">
                            <option selected>uniprotkb</option>
                            <option selected>intact</option>
                            <option selected>ddbj/embl/genbank</option>
                            <option selected>chebi</option>
                            <option selected>irefindex</option>
                            <option selected>hgnc</option>
                            <option selected>ensembl</option>
                        </select>
                        <br/>
                        <br/>
                        <label>Score:</label>
                        <input type="checkbox" id='url_score' name="score"/>
                        <br/>
                        <a id='url_butt' class="link-style" href="#">Send</a>
                    </fieldset>
    
                    <fieldset id='file'>
                        <form name="multiform" id="multiform" action="http://dachstein.biochem.mpg.de:8080/mimerge/cluster" method="POST" enctype="multipart/form-data">
                            <legend>Cluster By File</legend>
                            <br/>
                            <label>File:</label>
                            <input type="file" name="file" id='file_input'/>
                            <br/>
                            <br/>
                            <label >Mapping:</label>
                            <select id='mapping' data-placeholder="database mapping" multiple class="chosen-select-width" tabindex="16">
                                <option selected>uniprotkb</option>
                                <option selected>intact</option>
                                <option selected>ddbj/embl/genbank</option>
                                <option selected>chebi</option>
                                <option selected>irefindex</option>
                                <option selected>hgnc</option>
                                <option selected>ensembl</option>
                            </select>
                            <br/>
                            <br/>
                            <label>Score:</label>
                            <input type="checkbox" id='score' name="score"/>
                            <br/>
                            <button value="send" name="submitButton" type="submit" class="link-style">Send</button>
                        </form>
                    </fieldset>
                    <fieldset id="about">
                        <legend>About</legend>
                        <p>MiCluster web client is web application that provides the functionality of <a target="_blank" href="https://code.google.com/p/micluster/">MiCluster</a> and <a target="_blank" href="https://code.google.com/p/miscore/">MiScore</a> based on a <a target="_blank" href="https://code.google.com/p/micluster/wiki/mimerge">RESTful API</a>.</p>
                        <p>MiCluster rest as well as MiCluster web client were developed by the <a target="_blank" href="http://www.biochem.mpg.de/en/rg/habermann">Computational Biology</a> team at the <a target="_blank" href="https://www.biochem.mpg.de/en/">Max Planck Institute of Biochemistry</a> together with the <a target="_blank" href="https://www.ebi.ac.uk/intact">IntAct</a> team at the <a target="_blank" href="https://www.ebi.ac.uk/">European Bioinformatics Institute</a>.</p>
                    </fieldset>
                    <fieldset id='status'>
                        <legend>Status</legend>
                        <br/>
                        <label>Job Id:</label>
                        <input type="text" id='status_status'/>
                        <div id='status_msg'></div>
                        <a id='status_butt' class="link-style" href="#">Check</a>
                    </fieldset>
                    <div id='msg_div' class="ui-widget" style="margin-left: 25%;margin-right:5%;">
                        <div style="margin-top: 20px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all">
                            <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
                            <span id='msg'></span></p>
                        </div>
                    </div>
                
                    <div id='error_msg_div' class="ui-widget" style="margin-left: 25%; margin-right:5%;">
                        <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all">
                            <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
                            <span id='error_msg'></span></p>
                        </div>
                    </div>
            </section>
            </div>
            <div class="footer">
                <img src="img/LOGO1_RGB_png.png" alt="max plank gesellschaft" align="middle">
                <img src="img/LOGO-BIO-RGB_Schrift_rechts_de.png" alt="max plank institute of biochemistry" height="50" width="207" align="middle">
            </div>
        </div>

       
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>

        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        
          ga('create', 'UA-45417550-1', 'mpg.de');
          ga('send', 'pageview');
        
        </script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                
                $('#status_status').val($.cookie("jobId"));
                
                $('#file').hide();
                $('#url').hide();
                $('#status').hide();
                $('#about').hide();
                $('#msg_div').hide();
                $('#error_msg_div').hide();
                
                $('#url_item').click(function(){
                    $('fieldset').hide();
                    $('#url').show();
                });
                
                $('#file_item').click(function(){
                    $('fieldset').hide();
                    $('#file').show();
                });
                
                $('#service_item').click(function(){
                    $('fieldset').hide();
                    $('#service').show();
                });
                
                $('#status_item').click(function(){
                    $('fieldset').hide();
                    $('#status').show();
                });
                
                $('#about_item').click(function(){
                    $('fieldset').hide();
                    $('#about').show();
                });
                
                var postMessage = function(msg){
                    
                    if(msg.indexOf('ERROR') == -1){
                        $('#msg').html(msg);
                        $('#msg_div').show();
                        $('#error_msg_div').hide();
                    }else{
                        $('#error_msg').html(msg);
                        $('#error_msg_div').show();
                        $('#msg_div').hide();
                    }
                };
                
                var clusterStarted = function(data){
                        
                    $('#status_status').val(data);
                    $('fieldset').hide();
                    $('#status').show();
                        
                    $.cookie("jobId", data);
                    postMessage('Clustering job started, please click the send button to check the status!');
                };
                
                
                MI_CLUSTER.init('http://dachstein.biochem.mpg.de:8080/mimerge');
                MI_CLUSTER.getServers(function(xml){
					var x = '';
                    $(xml).find('name').each(function(i,e){
                         
                        var txt = $(e).text();
                        
                        if(txt == 'IntAct')
                            x +=  '<option selected>'+txt+'</option>';
                        else
                            x +=  '<option>'+txt+'</option>';
                    });
                    $('#service_service').empty().append(x);
                    
                    
                    
                    var config = {
                        '.chosen-select'           : {},
                        '.chosen-select-deselect'  : {allow_single_deselect:true},
                        '.chosen-select-no-single' : {disable_search_threshold:10},
                        '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                        '.chosen-select-width'     : {width:"60%"}
                    }
                        
                    for (var selector in config) {
                        $(selector).chosen(config[selector]);
                    }
                    
				});
                
                $('#service_butt').click(function(e){
                    
                    e.preventDefault();
                    
                    var params = {
                        q: $('#service_query').val(),
                        score: $('#service_score').prop('checked'),
                        service: $('#service_service').val(),
                        mapping: $('#service_mapping').val()
                    };
                    
                    MI_CLUSTER.cluster(params, clusterStarted);
                });
                
                $('#url_butt').click(function(e){
                    
                    e.preventDefault();
                    
                    var params = {
                        serviceurl: $('#url_service').val(),
                        score: $('#url_score').prop('checked'),
                        mapping: $('#url_mapping').val()
                    };
                    
                    MI_CLUSTER.clusterURL(params, clusterStarted);
                });
                
                
                var options = {
                    success: clusterStarted
                }; 
             
                // bind form using 'ajaxForm' 
                $('#multiform').ajaxForm(options);
                
                $('#status_butt').click(function(e){
                
                    e.preventDefault();
                    
                    MI_CLUSTER.status($('#status_status').val(), function(data){
                        
                        if(data.indexOf('COMPLETED') != -1){
                            window.open('html/display.html?jobId='+$('#status_status').val(),'_blank');
                        }else{
                            postMessage(data);
                        }
                    });
                });
                
                $(window).konami({
                    
                    cheat: function(){
                    
                        $('#logo').empty();
                        $('#logo').css("background-color","black");
                        
                        var params = {
                            images: 'img/space_inv_2.png',
                            imagesWidth: 240,
                            width: 120,
                            height: 87,
                            $drawTarget: $('#logo')
                        };
                        
                        var sprite1 = DHTMLSprite(params);//, sprite2 = DHTMLSprite(params);
                        sprite1.draw(5, 64);
                        
                        var i = 1;
                        var moveAll = function () {
                            sprite1.changeImage(i);
                            if(i==1){
                                i=0;
                            }else{
                                i=1;
                            }
                            setTimeout(moveAll, 500); 
                        };
                        moveAll();
                        
                        var d = 10;
                        var x = d;
                        var dir = true;
                        var w = $('#logo').width() - params.width;
                        var moveX = function () {
                            
                            if(x>=w){
                                dir = false;
                            }else if(x<=0){
                                dir = true;	
                            }
                            
                            if(dir){
                                x = x + d;
                            }else{
                                x = x - d;
                            }
                            
                            sprite1.draw(x, 64);
                            setTimeout(moveX, 500);
                        }
                        moveX();
                    }
                });
            });
        </script>
    </body>
</html>

<!--MiMerge client js-->
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/n0_cA2n.min.js"></script>
<script src="js/sprite.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.multiselect.min.js"></script>
<script src="js/miclusterweb.js"></script>
<script src="js/chosen.jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.form.min.js"></script>